<template>
  <div class="address">
    <mu-appbar :z-depth="0" style="width: 100%;top:0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      申报单
      <mu-button icon slot="right" @click="openFullScreenDialog">
        <mu-icon value="add"></mu-icon>
      </mu-button>
    </mu-appbar>
    <mu-load-more @refresh="refresh()" :refreshing="refreshing" :loading="loading" @load="load()">
      <mu-list textline="three-line" class="loadmore-wrap">
        <mu-paper round style="margin-bottom: 1rem" v-for="item in list" v-bind:key="item.id" :z-depth="0">
          <mu-list-item :key="item.id">
            <mu-list-item-action>
              <mu-avatar color="primary">
                <mu-icon value="place"></mu-icon>
              </mu-avatar>
            </mu-list-item-action>
            <mu-list-item-content>
              <mu-list-item-title>{{item.realname}} {{item.telphone ?
                item.telphone.replace(item.telphone.substr(3,4),"****"): ""}}
              </mu-list-item-title>
              <mu-list-item-sub-title>
                <span>{{item.province}}</span> <span>{{item.city}}</span> <span>{{item.street}}</span>
              </mu-list-item-sub-title>
              <mu-list-item-sub-title>
                {{item.bankUname}}
              </mu-list-item-sub-title>
            </mu-list-item-content>
          </mu-list-item>
          <div style="font-size: 12px;height: 3rem">
            <!--<span>{{item.isDefaultAddress === 1 ? '默认地址': ''}}</span>-->
            <mu-button style="float: right;width: 3rem;height: 3rem" icon slot="right" @click="remove(item.id)">
              <mu-icon color="red" size="20" value="remove_circle"></mu-icon>
            </mu-button>
            <mu-button style="float: right;width: 3rem;height: 3rem;" icon slot="right"
                       @click="openEditFullScreenDialog(item.id)">
              <mu-icon style="float: right" size="20" color="primary" value="edit"></mu-icon>
            </mu-button>
          </div>
        </mu-paper>
      </mu-list>
    </mu-load-more>
    <mu-dialog width="100%" style="height: 100%;" scrollable transition="slide-right" fullscreen
               :open.sync="openFullScreen">
      <mu-appbar :z-depth="0" style="top: 0" color="primary" :title="dialogTitle">
        <mu-button slot="left" icon @click="closeFullScreenDialog">
          <mu-icon value="close"></mu-icon>
        </mu-button>
        <mu-button slot="right" flat @click="sureFullScreenDialog">
          保存
        </mu-button>
      </mu-appbar>
      <div style="padding: 24px;">
        <mu-container>
          <mu-form ref="form" label-position="left" :model="validateForm">
            <mu-form-item label="默认地址：" prop="username">
              <mu-switch v-model="validateForm.isDefault"></mu-switch>
            </mu-form-item>
            <mu-form-item label="收件人姓名：" prop="realname" :rules="realnameRules">
              <mu-text-field v-model="validateForm.realname" prop="realname"></mu-text-field>
            </mu-form-item>
            <mu-form-item label="联系电话：" prop="telphone" :rules="telphoneRules">
              <mu-text-field v-model="validateForm.telphone" prop="telphone"></mu-text-field>
            </mu-form-item>
            <mu-form-item label="备用电话：" prop="telphone2">
              <mu-text-field v-model="validateForm.telphone2" prop="telphone2"></mu-text-field>
            </mu-form-item>
            <mu-form-item label="邮政编码：" prop="zip">
              <mu-text-field v-model="validateForm.zip" prop="zip"></mu-text-field>
            </mu-form-item>
            <mu-form-item label="详细地址：" prop="street">
              <mu-text-field v-model="validateForm.street" prop="street"></mu-text-field>
            </mu-form-item>
          </mu-form>
        </mu-container>
      </div>
    </mu-dialog>
  </div>
</template>
<script>
  import headerBack from '@/components/headerBack';
  import util from '@/common/util.js';

  export default {
    name: 'addressInfo',
    data() {
      return {
        refreshing: false,
        loading: false,
        search: '',
        warning: '向上滑动查看更多',
        num: 10,
        dialogTitle: '',
        realnameRules: [
          {validate: (val) => !!val, message: '必须填写收件人姓名'}
        ],
        messages: false,
        list: [],
        openFullScreen: false,
        telphoneRules: [
          {validate: (val) => !!val, message: '必须填写联系电话'}
        ],
        bankAccountRules: [
          {validate: (val) => !!val, message: '必须填写银行账号'}
        ],
        bankUnameRules: [
          {validate: (val) => !!val, message: '必须填写收款银行户名'}
        ],
        validateForm: {
          id: '',
          realname: '',
          telphone: '',
          telphone2: '',
          zip: '',
          province: '',
          city: '',
          street: '',
          isDefault: false
        }
      }
    },
    components: {
      headerBack
    },
    methods: {
      refresh() {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.num = 10;
          this.listData();
        }, 2000)
      },
      load() {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.num += 10;
          this.listData();
        }, 2000)
      },
      openEditFullScreenDialog(id) {
        this.dialogTitle = "修改送达地址";
        this.postRequest("/user/address/" + id).then(res => {
          if (res.code === 200) {
            this.validateForm = {
              id: id,
              realname: res.data.realname,
              telphone: res.data.telphone,
              telphone2: res.data.telphone2,
              zip: res.data.zip,
              street: res.data.street,
              isDefault: res.data.isDefaultAddress === 1
            };
            this.addressProvince = res.data.province;
            this.addressCity = res.data.city;
            this.address = [res.data.province, res.data.city];
            this.openFullScreen = true;
          }
        });
      },
      openFullScreenDialog() {
        this.dialogTitle = "添加送达地址";
        this.validateForm = {
          id: '',
          realname: '',
          telphone: '',
          telphone2: '',
          zip: '',
          province: '',
          city: '',
          street: '',
          isDefault: false
        };
        this.openFullScreen = true;
      },
      closeFullScreenDialog() {
        this.openFullScreen = false;
      },
      sureFullScreenDialog() {
        this.$refs.form.validate().then((result) => {
          if (result) {
            this.validateForm.province = this.addressProvince;
            this.validateForm.city = this.addressCity;
            this.postRequest("/user/uploadAddress", this.validateForm).then(res => {
              if (res.code === 200) {
                this.$toast.success("操作成功！");
                this.listData();
                this.openFullScreen = false;
              }
            });
          }
        });
      },
      listData() {
        const _self = this;
        let params = {
          title: this.title,
          currentPage: 1,
          pageSize: this.num
        };
        this.postRequest("/declare/list", params).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.declareList = res.data.records;
              if (_self.list) {
                _self.declareList.forEach(function (i) {
                  i.sureTimeStr = util.formatDate(i.sureTime);
                  i.createTimeStr = util.formatyyyyMMddDate(i.createTime);
                  let statusStr = "";
                  switch (i.status) {
                    case 1:
                      statusStr = "申报中";
                      break;
                    case 2:
                      statusStr = "受理中";
                      break;
                    case 3:
                      statusStr = "调解中";
                      break;
                    case 4:
                      statusStr = "诉讼中";
                      break;
                    case 5:
                      statusStr = "执行中";
                      break;
                    case 6:
                      statusStr = "已结束";
                      break;
                    default:
                      break;
                  }
                  i.statusStr = statusStr;
                });
              }
            }
          }
        });
      },
      remove(id) {
        this.$confirm('确定要删除？', '提示', {
          type: 'warning'
        }).then(({result}) => {
          if (result) {
            let param = {
              id: id
            };
            this.postRequest("/user/removeAddress", param).then(res => {
              if (res.code === 200) {
                this.$toast.success("删除成功");
                this.listData();
              }
            });
          }
        });
      }
    },
    mounted: function () {
      this.listData();
    }
  }
</script>

<style scoped lang="less">

  .address {
    position: fixed;
    top: 0;
    width: 100%;
    /*overflow: auto;*/
    height: 100%;
    z-index: 999;
    background-color: #f9f9f9;
  }

  .loadmore-wrap {
    width: 100%;
    height: 90%;
    overflow: scroll;
    padding: 10px;
  }

</style>
